<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<!--引入 GridManager 依赖-->
	<link rel="stylesheet" type="text/css" href="../css/GridManager.css">
	<script type="text/javascript" src="../js/GridManager.js"></script>
	<!--引入 React 依赖-->
	<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
	<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
	<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
	<title>GridManager: Angular环境下渲染</title>
	<style>
		html, body{
			width: 100%;
			height: 100%;
			overflow-x:hidden;
			margin: 0px;
			padding: 0px;
		}
		h2{
			font-size:22px;
			padding:10px 30px;
			color:#333;
		}
		p{
			font-size:14px;
			padding:10px 30px;
			color:#333;
			text-indent:2em;
			margin: 0px;
		}
		hr{
			margin-top: 18px;
			margin-bottom: 18px;
			border: 0;
			border-top: 1px solid #eee;
		}
	</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

	// 首先将GridManager 注册为 React 标签
	var ReactGridManager = React.createClass({
		render: function () {
			return <table data-name={this.props.gridManagerName}></table>;
		},
		componentDidMount: function () {
			var table = document.querySelector('table[data-name="'+this.props.gridManagerName+'"]');
			table.GM(this.props);
		}
	});

	// 配置GridManager init 必要参数
	var colData = [{
		key: 'name',
		remind: 'the name',
		width: '100px',
		text: '名称',
		sorting: ''
	},{
		key: 'info',
		remind: 'the info',
		text: '使用说明'
	},{
		key: 'url',
		remind: 'the url',
		text: 'url'
	},{
		key: 'createDate',
		remind: 'the createDate',
		width: '100px',
		text: '创建时间',
		sorting: 'DESC',
		template: function(createDate, rowObject){
			return new Date(createDate);
		}
	},{
		key: 'lastDate',
		remind: 'the lastDate',
		width: '100px',
		text: '最后修改时间',
		sorting: '',
		template: function(lastDate, rowObject){
			return new Date(lastDate);
		}
	},{
		key: 'action',
		remind: 'the action',
		width: '100px',
		text: '操作',
		template: function(action, rowObject){
			return '<span class="plugin-action edit-action" learnLink-id="'+rowObject.id+'">编辑</span>'
					+'<span class="plugin-action del-action" learnLink-id="'+rowObject.id+'">删除</span>';
		}
	}];
	var queryInfo = {pluginId: 1};
	ReactDOM.render(
			<div>
				<ReactGridManager
						gridManagerName="testReact"
						height="400px"
						columnData= {colData}
						supportRemind= {true}
						isCombSorting=  {true}
						supportAjaxPage= {true}
						supportSorting= {true}
						ajax_url= "http://www.lovejavascript.com/learnLinkManager/getLearnLinkList"
						ajax_type= "POST"
						query= {queryInfo}
						pageSize= {20}
				/>
			</div>,
			document.querySelector('#example')
	);
</script>
</body>
</html>
